<template>
  <div class="lianxi_main">
    <m-header modile-title="vue练习" go-back="true"></m-header>
    <div class="lianxi_content">
      <button @click="doThis">不阻止默认事件</button>
      <button v-on:click.stop.prevent="doThat">阻止默认事件</button>
      <div class="btns" @click="show2()">
        <div @click="show1()">
          <button @click="show($event)">点我</button>
          <button @click.stop="shows()">stop点我</button>
        </div>
      </div>
      <!--绑定内联样式-->
      <div
        v-bind:style="{
            color: activeColor,
            fontSize: fontSize + 'px' ,
            background:background,
            border:border,
            borderRadius:borderRadius}">
        111
      </div>
      <yd-countdown :time="111111" timetype="second"></yd-countdown>
    </div>
  </div>
</template>
<style lang="scss">
  .lianxi_main {
    width: 100%;
    padding-top: 50px;
    background: #fff;
    .lianxi_content {
      width: 100%;
      text-align: center;
      button {
        background: #42bd56;
        color: #fff;
        padding: 10px;
        font-size: 16px;
        outline: none;
        border: none;
        border-radius: 5px;
      }
      .btns {
        margin-top: 10px;
        margin-bottom: 10px;
      }
      p {
        margin-top: 10px;
      }
    }
  }
</style>
<script>
  import mHeader from '../../../components/header'
  import {Toast} from 'mint-ui'

  export default {
    data() {
      return {
        activeColor: '#fff',
        fontSize: 30,
        background: 'red',
        border: '1px solid #666',
        borderRadius: '10px'
      }
    },
    methods: {
      doThis() {
        Toast({
          message: '我是直接点击事件',
          position: 'middle',
          duration: 2500
        })
      },
      doThat() {
        Toast({
          message: '阻止默认事件的方法',
          position: 'middle',
          duration: 2500
        })
      },
      shows() {
        console.log('我是阻止stop事件冒泡的')
      },
      show(e) {
        // 不再派发事件--终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
        // 如果不组织事件的冒泡，那么里层的点击事件会一层一层的执行下去所以每一层的都会执行
        e.stopPropagation();// 原生阻止冒泡事件
        console.log("111")
      },
      show1() {
        console.log("222")
      },
      show2() {
        console.log("333")
      }
    },
    components: {
      mHeader
    }
  }
</script>
